<template>
	<view class="index">
		<template v-if="ZhuCe_KaiQi_ZhuangTai">
			<view class="XunHuan">
				<view class="Zuo">账号类型</view>
				<view class="You DanXuan">
					<radio-group @change="DanXuan_ZhangHaoLeiXing">
						<label v-if="ZhuCe_KaiQi_ZhuangTai_YouXiang">
							<radio :checked="ZhuCe_LeiXing == 'YouXiang'" value="YouXiang" /><text>邮箱注册</text>
						</label>
						<label v-if="ZhuCe_KaiQi_ZhuangTai_ShouJi">
							<radio :checked="ZhuCe_LeiXing == 'ShouJi'" value="ShouJi" /><text>手机注册</text>
						</label>
					</radio-group>
				</view>
			</view>
			
			<view class="BiaoDan">
				<view class="XunHuan">
					<text
						:class="ZhuCe_LeiXing=='YouXiang'?'iconfont icon-fuzhi':'iconfont icon-shouji'"></text>
					<input
						v-model="Vmodel_DiZhi"
						:type="ZhuCe_LeiXing=='YouXiang'?'text':'number'"
						:placeholder="ZhuCe_LeiXing=='YouXiang'?'请输入邮箱地址':'请输入手机号'"
						placeholder-style="color:#C0C4CC;">
					<view
						v-if="FaMa_ZhuangTai == 'WeiFaSong'"
						@click="DianJi_FaMa(ZhuCe_LeiXing=='YouXiang'?'YouXiang':'ShouJi')">发送验证码</view>
					<view
						v-if="FaMa_ZhuangTai == 'JieShouZhong'"
						style="background: #409EFF;color: #FFF;">{{FaMa_DaoJiShi}}秒后重发</view>
				</view>
				<view class="XunHuan">
					<text class="iconfont icon-keyboard-9"></text>
					<input
						v-model="Vmodel_YanZhengMa"
						placeholder="输入验证码"
						placeholder-style="color:#C0C4CC;">
				</view>
				<view class="XunHuan">
					<text class="iconfont icon-user"></text>
					<input
						v-model="Vmodel_NiCheng"
						type="text"
						placeholder="输入用户昵称"
						placeholder-style="color:#C0C4CC;">
				</view>
				<view class="XunHuan">
					<text class="iconfont icon-lock"></text>
					<input
						v-model="Vmodel_MiMa"
						type="text"
						placeholder="输入密码"
						placeholder-style="color:#C0C4CC;">
				</view>
				<view
					@click="DianJi_ZhuCe(ZhuCe_LeiXing=='YouXiang'?'YouXiang':'ShouJi')"
					class="YR-UI-AnNiu-1"
					style="
						width: 200rpx;
						background: #F56C6C;
						color: #FFF;
						margin: 25rpx auto 0 auto;
					">注册</view>
			</view>
		</template>
		<template v-else>
			<!-- 加载中 | 1 | 全屏 -->
			<view class="YR-UI-JiaZaiZhong-1">
				<text
					style="color:#C0C4CC;"
					v-if="ZhuCe_KaiQi_ZhuangTai_WenZi == '站点关闭了注册'">
					{{ZhuCe_KaiQi_ZhuangTai_WenZi}}
				</text>
				<text style="color:#C0C4CC;" v-else>注册状态检查中</text>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ZhuCe_KaiQi_ZhuangTai:false,
				ZhuCe_KaiQi_ZhuangTai_WenZi:"",
				ZhuCe_KaiQi_ZhuangTai_YouXiang:false,
				ZhuCe_KaiQi_ZhuangTai_ShouJi:false,
				ZhuCe_LeiXing:"YouXiang",
				Vmodel_DiZhi:"",
				Vmodel_YanZhengMa:"",
				Vmodel_NiCheng:"",
				Vmodel_MiMa:"",
				
				FaMa_ZhuangTai:"WeiFaSong",
				FaMa_DaoJiShi:60,
				
			}
		},
		onLoad() {
			uni.request({
				url:this.$_URL() + "/api/v2/global/configs",
				method:'GET',
				header:this.$_Fresns_Header(),
				data:{
					"keys":"site_email_register,site_phone_register,site_public_status"
				},
				success: (res) => {
					this.ZhuCe_KaiQi_ZhuangTai = res.data.data.site_public_status;
					if(this.ZhuCe_KaiQi_ZhuangTai){
						this.ZhuCe_KaiQi_ZhuangTai_YouXiang = res.data.data.site_email_register;
						this.ZhuCe_KaiQi_ZhuangTai_ShouJi = res.data.data.site_phone_register;
					}else{
						this.ZhuCe_KaiQi_ZhuangTai_WenZi = "站点关闭了注册"
					}
				}
			})
		},
		methods: {
			// 单选，切换注册类型
			DanXuan_ZhangHaoLeiXing(e){
				this.ZhuCe_LeiXing = e.target.value;
			},
			// 点击，发码
			DianJi_FaMa(e){
				uni.showLoading({ title:"验证码发送中" });
				uni.request({
					url:this.$_URL() + "/api/v2/common/send-verify-code",
					method:'POST',
					header:this.$_Fresns_Header(),
					data:{
						"type":e=='YouXiang'?'email':'sms',
						"useType":1,
						"templateId":2,
						"account":this.Vmodel_DiZhi,
						"countryCode":e=='YouXiang'?'':86,
					},
					success: (res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							this.FaMa_ZhuangTai = 'JieShouZhong';
							this.DingShiQi_ShiJian = setInterval(() => {
								this.FaMa_DaoJiShi -= 1;
								if(this.FaMa_DaoJiShi == 0){
									clearInterval(this.DingShiQi_ShiJian)
									this.FaMa_DaoJiShi = 10;
									this.FaMa_ZhuangTai = 'WeiFaSong';
								}
							}, 1000);
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				})
			},
			// 点击，注册
			DianJi_ZhuCe(e){
				uni.showLoading({ title:"注册中" });
				uni.request({
					url:this.$_URL() + "/api/v2/account/register",
					method:'POST',
					header:this.$_Fresns_Header(),
					data:{
						"type":e=='YouXiang'?'email':'phone',
						"account":this.Vmodel_DiZhi,
						"verifyCode": this.Vmodel_YanZhengMa,
						"nickname":this.Vmodel_NiCheng,
						"password":btoa(this.Vmodel_MiMa),
						"countryCode":e=='YouXiang'?'':86
					},
					success: (res) => {
						uni.hideLoading();
						if(res.data.message == '成功'){
							uni.showToast({
								title:"注册成功",
								icon:"none",
								duration:1000
							});
							setTimeout(()=>{ uni.navigateBack(); },1000);
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.index{
	.YR-UI-AnNiu-1{
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}
	.YR-UI-JiaZaiZhong-1 {
		width: 100%;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1888;
		background: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
	
		view {
			width: 70rpx;
			height: 70rpx;
			background: url();
			background-size: 100%;
		}
	}
	.XunHuan{
		display: flex;
		border: 1rpx solid $BianKuangSe;
		margin: 25rpx 25rpx 0 25rpx;
		height: 80rpx;
		.Zuo{
			font-size: 22rpx;
			line-height: 22rpx;
			background: $BeiJingSe;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			padding: 0 25rpx;
			border-right: 1rpx solid $BianKuangSe;
		}
		.You{
			flex: 1;
			height: 80rpx;
		}
		.DanXuan{
			height: 80rpx;
			display: flex;
			align-items: center;
			radio-group{
				display: flex;
				align-items: center;
				label{
					display: flex;
					align-items: center;
					margin: 0 0 0 15rpx;
					radio{
						transform: scale(0.6);
						margin: 0 -10rpx 0 0;
					}
				}
			}
		}
	}
	.BiaoDan{
		.XunHuan{
			display: flex;
			align-items: center;
			padding: 25rpx;
			border-bottom: 1rpx solid $BianKuangSe;
			text{
				color: $ZhanWeiSe;
				margin: 0 15rpx 0 0;
			}
			input{
				font-size: 28rpx;
				flex: 1;
			}
			view{
				margin: 0 0 0 15rpx;
				display: inline-flex;
				background: $HuangSe;
				color: #000;
				font-size: 22rpx;
				line-height: 22rpx;
				border-radius: 100rpx;
				padding:15rpx 20rpx;
			}
		}
	}
}
</style>